<template>
  <div class="appeal">
    <!-- 头部 -->
     <my-header :left="true" title="交易申诉">
      <!-- 插入 右侧icon -->
      <template class="right_icon" #right_icon>
        <van-popover  v-model="showPopover" theme="dark" trigger="click" placement="bottom-end" >
          <!-- 第一行 首页 -->
          <van-row @click="showPopover=false;$router.push('/home');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-shouye"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">首页</span>
            </van-col>
          </van-row>
          <!-- 第二行 消息-->
           <van-row  @click="showPopover=false;$router.push('/message');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-youjian"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">消息</span>
            </van-col>
          </van-row>
           <!-- 第三行 我的收藏-->
           <van-row  @click="showPopover=false;$router.push('/collection');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-shoucang1"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">收藏</span>
            </van-col>
          </van-row>
          <template #reference>
            <span class="iconfont icon-gengduo"></span>
          </template>
        </van-popover>
      </template>
    </my-header>
    <!-- 表单部分 -->
    <div class="user_input">
      <!-- 订单选择区域 -->
      <van-cell title="请选择有问题的订单" is-link  :value="selected_order && selected_order.name" @click="show = true"/>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        :round="false"
        @select="select_order"
        cancel-text="取消"
        description="请选择有问题的订单信息"
        close-on-click-action
      />
      <!-- 问题填写区域 -->
      <textarea class="textarea" v-model="input_count" placeholder="请输入在交易过程中遇到的问题"></textarea>
      <!-- 图片上传区域 -->
      <div class="uploader_area">
        <p>上传图片</p>
        <van-uploader v-model="fileList"  :before-read="beforeRead" :after-read="afterRead" />
      </div>
      <!-- 联系电话 -->
      <van-field class="user_phone" v-model="tel" type="number" label="联系电话" placeholder="选填，便于我们联系您" />
      <!-- 提交按钮 -->
      <van-button class="submit" @click="submit">提交</van-button>
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
export default {
  name:"Appeal",
  components:{
    MyHeader
  },
  created(){
    this.dialog();// 弹框提示
    this.get_order_data();
  },
  data() {
    return {
      showPopover:false,
      show:false,// 订单选择
      actions: [{name:"没有订单信息",subname:"如果以下列表中没有所需申诉的订单请选此项",gid:0,out_trade_no:0}], // 选择申诉订单
      tel:"", // 用户手机号码
      selected_order:null,// 当前选择的订单信息
      input_count:"",// 用户遇到的问题
      fileList:[],// 文件列表
    }
  },
  methods: {
    // 选择了订单
    select_order(action,index){
      console.log(action);
      this.selected_order = action
    },
    // 请求用户订单数据
    async get_order_data(){
      const {data:res} = await this.$http.get("userOrderInfo");
      if(!res.isok) return this.$message({position:"center",message:res.message});
      let user_order_data = res.data;
      // 整理数据 赋值给 actions
      for (let index = 0; index < user_order_data.data.length; index++) {
        this.actions.push({
          name:user_order_data.gameinfo[index].Role_name + " " + "￥" + user_order_data.data[index].total_amount,
          subname:`交易时间：${user_order_data.data[index].timestamp}`,
          gid:user_order_data.data[index].gid,
          out_trade_no:user_order_data.data[index].out_trade_no
        })
      }
      console.log(res);
    },
    // 提交申诉
    async submit(){
      // 非空验证
      if(!this.selected_order || !this.input_count){
        return this.$message({position:"center",message:"请填写必填项"})
      }
      // 选择订单 图片上传验证
      if(this.selected_order.out_trade_no == 0){
        // 判断是否上传了图片
        if(this.fileList.length == 0){
          return this.dialog();// 弹框提示
        }
      }
      // 提交
      // fileList 转字符
      let imgPathArr = [];
      for (let index = 0; index < this.fileList.length; index++) {
        imgPathArr.push(this.fileList[index].img_path);
      }
      let str = imgPathArr.join(",");
      const {data:res} = await this.$http.post("submit_appeal",{
        img_path:str,
        out_trade_no:this.selected_order.out_trade_no,
        count:this.input_count,
        phone:this.tel
      })
      this.$message({position:"center",message:res.message});
      if(!res.isok) return;
      this.$router.go(-1);
    },
    // 上传前置处理
    beforeRead(file){
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {
        this.$message({position:"center",message:"请上传格式为jpeg，png或jpg格式的图片"})
        return false;
      }
      return true;
    },
    // 选择的文件读取完成
    async afterRead(file){
      file.status = 'uploading';
      file.message = '上传中...';
      let fromData = new FormData();
      fromData.append("file", file.file);
      // 上传文件
      const { data: res } = await this.$http.post(
        "upload_order",
        fromData,
        { headers: { "Content-Type": "multipart/form-data" } }
      );
      if (!res.isok){
        this.$message({ position: "center", message: res.message })
        file.status = 'failed';
        file.message = '上传失败';
        return;
      }
      file.status = 'done';
      file.message = '上传成功';
      file.img_path = res.data.img_path;
      // console.log(res);
      console.log(this.fileList);
    },
    dialog(){
      this.$dialog.alert({
        title:"图片上传提示",
        message:"如果列表中没有订单记录请上传支付宝交易记录截图"
      })
    }
  },
}
</script>
<style lang="less" scoped>
.appeal{
  padding-top: 0.45rem;
}
.van-popover{
  .van-row{
    width: 1rem;
    font-size: 0.15rem;
    height: 0.38rem;
    text-align: center;
    border-top: 0.01rem solid #3F3E48;
    line-height: 0.35rem;
  }
}
.user_input{
  width: 100%;
  // padding: 0.1rem 0.1rem;
  box-sizing: border-box;
  font-size: 0.14rem;
  // background-color: #FFF;
  margin-top: 0.06rem;
  .textarea{
    padding: 0.1rem;
    margin-top: 0.06rem;
    box-sizing: border-box;
    width: 100%;
    height: 1rem;
    border: none;
    background-color: #FFF;
  }
}
.user_phone{
  margin-top: 0.06rem;
}
.submit{
  display: block;
  width: 90%;
  border: 0;
  color: #fff;
  background: #e74e4b;
  margin: 0 auto;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
}
.uploader_area{
  font-size: 0.14rem;
  background-color: #FFF;
  padding: 0.1rem 0.11rem;
  box-sizing: border-box;
  margin-top: 0.06rem;
  color: #646566;
  .van-uploader{
    margin-top: 0.06rem;
  }
}
</style>